/**
 * 流程基本设置-可见范围单选框组件
 */
import React from 'react';
import { Radio } from 'antd';
import { SelectPost, SelectDepartment, SelectEmployee } from '../../components';

const RadioForm = ({ value = {}, onChange, companyId = 100 }, ref) => {
    const { scopeField = 'company', scopeValue = [] } = value;

    const handleRadioChange = e => {
        onChange({ scopeField: e.target.value, scopeValue: [] });
    };

    const handleScopeValueChange = _value => {
        onChange({ ...value, scopeValue: _value });
    };

    return (
        <div ref={ref}>
            <Radio.Group value={scopeField} onChange={handleRadioChange}>
                <Radio value="company">全体员工</Radio>
                <Radio value="post">指定职位</Radio>
                <Radio value="department">指定部门</Radio>
                <Radio value="employee">指定人员</Radio>
            </Radio.Group>
            {scopeField === 'post' && (
                <SelectPost
                    companyId={companyId}
                    value={scopeValue}
                    onChange={handleScopeValueChange}
                    treeCheckable
                    placeholder="请选择职位"
                />
            )}
            {scopeField === 'department' && (
                <SelectDepartment
                    companyId={companyId}
                    value={scopeValue}
                    onChange={handleScopeValueChange}
                    treeCheckable
                    placeholder="请选择部门"
                />
            )}
            {scopeField === 'employee' && (
                <SelectEmployee
                    companyId={companyId}
                    value={scopeValue}
                    onChange={handleScopeValueChange}
                    placeholder="请选择人员"
                />
            )}
        </div>
    );
};

export default React.forwardRef(RadioForm);
